<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>医生端首页</title>
		<style>
			body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
			.status-bar {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 20px;
				background-color: #f5f5f5;
				border-bottom: 1px solid #ddd;
			}
			.status-item {
				display: flex;
				align-items: center;
			}
			.time {
				font-weight: bold;
			}
			.doctor-info {
				margin-left: 20px;
			}
			.notification {
				position: relative;
				margin-right: 20px;
			}
			.notification-badge {
				position: absolute;
				top: -5px;
				right: -5px;
				background-color: red;
				color: white;
				border-radius: 50%;
				width: 16px;
				height: 16px;
				font-size: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.search-box {
				padding: 5px 10px;
				border: 1px solid #ddd;
				border-radius: 4px;
			}
			.settings {
				color: #2196F3;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="status-bar">
			<div class="status-item">
				<a href="登录.html" style="margin-right: 20px; color: #2196F3; text-decoration: none;" onclick="window.location.href='登录.html'; return false;">返回</a>
				<div class="time" id="current-time"></div>
			</div>
			<div class="status-item">
				<div class="add-patient" id="add-patient-btn" style="margin-right: 20px; color: #2196F3; cursor: pointer;">加入患者</div>
				<div class="notification">
					<span>🔔</span>
					<div class="notification-badge">3</div>
				</div>
				<input type="text" class="search-box" placeholder="患者姓名/床号" id="patient-search">
					<script>
						document.getElementById('patient-search').addEventListener('input', function(e) {
							const searchTerm = e.target.value.toLowerCase();
							const alertItems = document.querySelectorAll('.alert-item');
							alertItems.forEach(item => {
								const patientName = item.querySelector('div:nth-child(2) > div:nth-child(2)').textContent.toLowerCase();
								if(patientName.includes(searchTerm)) {
									item.style.display = 'flex';
								} else {
									item.style.display = 'none';
								}
							});
						});
					</script>
			</div>
		</div>
		
		
        <div class="stats-container" style="display: flex; justify-content: space-between; padding: 20px; background: white; margin: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
			<div class="stat-card" style="flex: 1; padding: 15px; margin: 0 10px; border-radius: 8px; background: #f8f9fa; text-align: center;">
				<div style="font-size: 24px; color: #666; margin-bottom: 10px;">👥 总患者数</div>
				<div style="font-size: 36px; font-weight: bold; color: #2196F3; margin-bottom: 5px;">120</div>
				<div style="font-size: 12px; color: #4CAF50;">↑ 5 本周</div>
			</div>
			<div class="stat-card" style="flex: 1; padding: 15px; margin: 0 10px; border-radius: 8px; background: #f8f9fa; text-align: center;">
				<div style="font-size: 24px; color: #666; margin-bottom: 10px;">📱 在线设备</div>
				<div style="font-size: 36px; font-weight: bold; color: #2196F3; margin-bottom: 5px;">85</div>
				<div style="font-size: 12px; color: #4CAF50;">正常率 98%</div>
			</div>
			<div class="stat-card" style="flex: 1; padding: 15px; margin: 0 10px; border-radius: 8px; background: #f8f9fa; text-align: center;">
				<div style="font-size: 24px; color: #666; margin-bottom: 10px;">🚨 今日警报</div>
				<div style="font-size: 36px; font-weight: bold; color: #2196F3; margin-bottom: 5px;">12</div>
				<div style="font-size: 12px; color: #FF5722;">3 紧急</div>
			</div>
			<div class="stat-card" style="flex: 1; padding: 15px; margin: 0 10px; border-radius: 8px; background: #f8f9fa; text-align: center;">
				<div style="font-size: 24px; color: #666; margin-bottom: 10px;">⚠️ 高风险患者</div>
				<div style="font-size: 36px; font-weight: bold; color: #2196F3; margin-bottom: 5px;">8</div>
				<div style="font-size: 12px; color: #FF5722;">需重点关注</div>
			</div>
		</div>
		
		<div class="reminder-container" style="margin: 20px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
			<h3 style="margin-top: 0; margin-bottom: 15px;">个性化提醒</h3>
			<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;">
				<div class="reminder-card" style="padding: 15px; background: #f8f9fa; border-radius: 4px;">
					<h4 style="margin-top: 0; margin-bottom: 10px;">待办事项</h4>
					<div style="font-size: 14px; color: #666;">
						<div>· 完成3例患者病历</div>
						<div>· 审核5份检查报告</div>
						<div>· 安排2例手术</div>
					</div>
				</div>
				<div class="reminder-card" style="padding: 15px; background: #f8f9fa; border-radius: 4px;">
					<h4 style="margin-top: 0; margin-bottom: 10px;">重点关注</h4>
					<div style="font-size: 14px; color: #666;">
						<div>· 3号床: 血氧异常</div>
						<div>· 5号床: 心率不稳</div>
						<div>· 8号床: 血压升高</div>
					</div>
				</div>
				<div class="reminder-card" style="padding: 15px; background: #f8f9fa; border-radius: 4px;">
					<h4 style="margin-top: 0; margin-bottom: 10px;">用药提醒</h4>
					<div style="font-size: 14px; color: #666;">
						<div>· 3号床: 阿司匹林 100mg</div>
						<div>· 5号床: 胰岛素 10U</div>
						<div>· 8号床: 降压药 1片</div>
					</div>
				</div>
				<div class="reminder-card" style="padding: 15px; background: #f8f9fa; border-radius: 4px;">
					<h4 style="margin-top: 0; margin-bottom: 10px;">会诊安排</h4>
					<div style="font-size: 14px; color: #666;">
						<div>· 10:00 心血管会诊</div>
						<div>· 14:30 查房</div>
						<div>· 16:00 病例讨论</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		
		<div class="alerts-container" style="margin: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
			<h3 style="padding: 15px 20px; margin: 0; border-bottom: 1px solid #eee;">实时警报</h3>
			<div class="alerts-list" style="max-height: 300px; overflow-y: auto;">
				<div class="alert-item" style="padding: 15px 20px; border-bottom: 1px solid #f5f5f5; display: flex; justify-content: space-between; align-items: center;">
					<div style="display: flex; align-items: center;">
						<div class="alert-level" style="width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background: red;"></div>
						<div>
							<div style="font-weight: bold;">危急 - 心率异常</div>
							<div style="font-size: 12px; color: #666;">患者: 张三 (3号床) · 2023-11-15 14:30:25</div>
						</div>
					</div>
					<div style="font-size: 12px; color: #FF5722;">未处理</div>
				</div>
			</div>
		</div>
		
<div class="emergency-panel" style="margin: 20px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <h3 style="margin-top: 0; margin-bottom: 15px;">紧急响应面板</h3>
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;">
                <div class="emergency-item" style="padding: 15px; background: #f8f9fa; border-radius: 4px; text-align: center; cursor: pointer;" onclick="handleSOS()">
                    <div style="font-size: 36px; margin-bottom: 10px; color: #FF5722;">🆘</div>
                    <div style="font-weight: bold;">SOS紧急呼叫</div>
                    <div style="font-size: 12px; color: #666; margin-top: 5px;">接收患者的紧急求助</div>
                </div>
                <div class="emergency-item" style="padding: 15px; background: #f8f9fa; border-radius: 4px; text-align: center; cursor: pointer;" onclick="handleRescueTeam()">
                    <div style="font-size: 36px; margin-bottom: 10px; color: #FF5722;">👨‍⚕️</div>
                    <div style="font-weight: bold;">抢救团队召集</div>
                    <div style="font-size: 12px; color: #666; margin-top: 5px;">一键呼叫抢救团队成员</div>
                </div>
                <div class="emergency-item" style="padding: 15px; background: #f8f9fa; border-radius: 4px; text-align: center; cursor: pointer;" onclick="handleEmergencyPlan()">
                    <div style="font-size: 36px; margin-bottom: 10px; color: #FF5722;">📋</div>
                    <div style="font-weight: bold;">应急预案启动</div>
                    <div style="font-size: 12px; color: #666; margin-top: 5px;">标准化应急流程引导</div>
                </div>
                <div class="emergency-item" style="padding: 15px; background: #f8f9fa; border-radius: 4px; text-align: center; cursor: pointer;" onclick="handleEmergencyContacts()">
                    <div style="font-size: 36px; margin-bottom: 10px; color: #FF5722;">📞</div>
                    <div style="font-weight: bold;">紧急通讯录</div>
                    <div style="font-size: 12px; color: #666; margin-top: 5px;">关键联系人快速拨号</div>
                </div>
            </div>
        </div>
        
        <div class="quick-access" style="margin: 10px; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <div style="display: flex; justify-content: space-between; gap: 10px;">
                <div class="quick-item" style="text-align: center; cursor: pointer;" onclick="handleQuickAccess('medication')">
                    <div style="font-size: 36px; margin-bottom: 10px;">💊</div>
                    <div style="font-weight: bold;">用药管理</div>
                    <div style="font-size: 12px; color: #666;">查看和调整用药</div>
                </div>
                <div class="quick-item" style="text-align: center; cursor: pointer;" onclick="handleQuickAccess('record')">
                    <div style="font-size: 36px; margin-bottom: 10px;">📝</div>
                    <div style="font-weight: bold;">病历记录</div>
                    <div style="font-size: 12px; color: #666;">查看和编辑病历</div>
                </div>
                <div class="quick-item" style="text-align: center; cursor: pointer;" onclick="handleQuickAccess('trend')">
                    <div style="font-size: 36px; margin-bottom: 10px;">📈</div>
                    <div style="font-weight: bold;">健康趋势</div>
                    <div style="font-size: 12px; color: #666;">查看患者健康数据</div>
                </div>
                <div class="quick-item" style="text-align: center; cursor: pointer;" onclick="handleQuickAccess('consult')">
                    <div style="font-size: 36px; margin-bottom: 10px;">👥</div>
                    <div style="font-weight: bold;">会诊记录</div>
                    <div style="font-size: 12px; color: #666;">查看会诊信息</div>
                </div>
                <div class="quick-item" style="text-align: center; cursor: pointer;" onclick="handleQuickAccess('stats')">
                    <div style="font-size: 36px; margin-bottom: 10px;">📊</div>
                    <div style="font-weight: bold;">统计分析</div>
                    <div style="font-size: 12px; color: #666;">查看统计数据</div>
                </div>
            </div>
        </div>
</div>
		<script>
			// 更新时间
			function updateTime() {
				const now = new Date();
				document.getElementById('current-time').textContent = now.toLocaleTimeString();
			}
			setInterval(updateTime, 1000);
			updateTime();

			// 模拟医生信息
			// 实际应用中应从后端获取
			document.getElementById('doctor-name').textContent = '张医生';
			document.getElementById('doctor-department').textContent = ' - 内科';
			document.getElementById('doctor-title').textContent = ' - 主任医师';

			// 模拟警报数据
			const alertsData = [
				{ level: 'red', type: '心率异常', patient: '张三', bed: '3号床', time: '2023-11-15 14:30:25', status: '未处理' },
				{ level: 'orange', type: '血氧过低', patient: '李四', bed: '5号床', time: '2023-11-15 14:25:10', status: '已确认' },
				{ level: 'yellow', type: '设备离线', patient: '王五', bed: '8号床', time: '2023-11-15 14:20:45', status: '未处理' }
			];

			// 更新警报列表
			function updateAlerts() {
				const alertsList = document.querySelector('.alerts-list');
				alertsList.innerHTML = '';

				alertsData.forEach(alert => {
					const alertItem = document.createElement('div');
					alertItem.className = 'alert-item';
					alertItem.style = 'padding: 15px 20px; border-bottom: 1px solid #f5f5f5; display: flex; justify-content: space-between; align-items: center;';

					const levelColor = {
						red: '#FF0000',
						orange: '#FFA500',
						yellow: '#FFD700'
					}[alert.level];

					const statusColor = {
						'未处理': '#FF5722',
						'已确认': '#2196F3',
						'已解决': '#4CAF50'
					}[alert.status];

					alertItem.innerHTML = `
						<div style="display: flex; align-items: center;">
							<div class="alert-level" style="width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background: ${levelColor};"></div>
							<div>
								<div style="font-weight: bold;">${alert.level === 'red' ? '危急' : alert.level === 'orange' ? '紧急' : '警告'} - ${alert.type}</div>
								<div style="font-size: 12px; color: #666;">患者: ${alert.patient} (${alert.bed}) · ${alert.time}</div>
							</div>
						</div>
						<div style="font-size: 12px; color: ${statusColor};">${alert.status}</div>
					`;

					alertsList.appendChild(alertItem);
				});
			}

			// 初始加载警报
			updateAlerts();

			// 紧急响应功能
			function handleSOS() {
				alert('已发送SOS紧急呼叫请求！');
			}

			function handleRescueTeam() {
				const team = prompt('请输入要召集的抢救团队成员，用逗号分隔：');
				if (team) {
					alert(`已召集抢救团队成员: ${team}`);
				}
			}

			function handleEmergencyPlan() {
				const steps = [
					'1. 评估患者生命体征',
					'2. 启动心肺复苏(如需要)',
					'3. 呼叫抢救团队',
					'4. 准备急救药品和设备'
				].join('\n');
				alert(`标准化应急流程:\n${steps}`);
			}

			function handleEmergencyContacts() {
				const patient = prompt('请输入患者姓名：');
				if (patient) {
					alert(`正在为患者 ${patient} 拨打紧急联系人电话...`);
				}
			}
			
			// 快捷功能处理
			function handleQuickAccess(type) {
				switch(type) {
					case 'medication':
						window.location.href = 'medication-management.html';
						break;
					case 'record':
						window.location.href = 'medical-record.html';
						break;
					case 'trend':
						window.location.href = 'health-trend.html';
						break;
					case 'consult':
						window.location.href = 'consultation.html';
						break;
					case 'stats':
						window.location.href = 'stats-analysis.html';
						break;
				}
			}

			// 加入患者按钮点击事件
			document.getElementById('add-patient-btn').addEventListener('click', function() {
				const formHtml = `
				<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;">
					<div style="background: white; padding: 20px; border-radius: 5px; width: 400px;">
						<h3 style="margin-top: 0;">添加新患者</h3>
						<div style="margin-bottom: 15px;">
							<label style="display: block; margin-bottom: 5px;">患者姓名</label>
							<input type="text" id="patient-name" style="width: 100%; padding: 8px; box-sizing: border-box;">
						</div>
						<div style="margin-bottom: 15px;">
							<label style="display: block; margin-bottom: 5px;">病历号</label>
							<input type="text" id="patient-id" style="width: 100%; padding: 8px; box-sizing: border-box;">
						</div>
						<div style="margin-bottom: 15px;">
							<label style="display: block; margin-bottom: 5px;">联系方式</label>
							<input type="tel" id="patient-phone" style="width: 100%; padding: 8px; box-sizing: border-box;">
						</div>
						<div style="display: flex; justify-content: flex-end;">
							<button id="cancel-patient" style="margin-right: 10px; padding: 8px 15px; background: #f5f5f5; border: none; cursor: pointer;">取消</button>
							<button id="save-patient" style="padding: 8px 15px; background: #2196F3; color: white; border: none; cursor: pointer;">保存</button>
						</div>
					</div>
				</div>
				`;
				document.body.insertAdjacentHTML('beforeend', formHtml);

				// 关闭模态框
				document.getElementById('cancel-patient').addEventListener('click', function() {
					document.body.removeChild(document.querySelector('div[style^="position: fixed"]'));
				});

				// 保存患者信息
				document.getElementById('save-patient').addEventListener('click', function() {
					const name = document.getElementById('patient-name').value;
					const id = document.getElementById('patient-id').value;
					const phone = document.getElementById('patient-phone').value;
					alert(`患者信息已保存:\n姓名: ${name}\n病历号: ${id}\n联系方式: ${phone}`);
					document.body.removeChild(document.querySelector('div[style^="position: fixed"]'));
				});
			});
		</script>
	</body>
</html>